<template>
  <view class="topBar">
    <view class="tablist" v-for="item,index in topTabList" :key='index' @click='_handleCurrTab(index,item.id)'>
      <view class="tabText">{{item.name}}</view>
      <view class="icon" :class='active == index && popupShow? "activeicon":""'></view>
    </view>
    <view class="popupBox" v-if='popupShow'>
      <scroll-view :scroll-y="true" class="uni-center center-box">
        <view
            v-for="(item, index) in tabItem[active]"
            :key="index"
            @click="_handleChoose(item)"
            class="uni-list-item">
          <view class="leftIcon">
            <uni-icon v-if='activeId == item.id' type="checkmarkempty" color="#0AAFFF" size="24"/></view>
          <view :class="activeId == item.id ? 'activeIconText':''">{{ item.name }}</view>
        </view>
      </scroll-view>
      <view class="closeShow" @click='_handleClosePopup'></view>
    </view>
  </view>
</template>

<script>
  import uniIcon from '@/components/uni-icon/uni-icon.vue'

  export default {
    components: {
      uniIcon
    },
    props: {
      tabList: Array,
      _handleTab: Function
    },
    data() {
      return {
        popupShow:false,
        active: null,
        activeId:null,
        topTabList:this.tabList,
        tabItem: [
					[{
            name:'周边',
            id:0
          },{
            name:'1111',
            id:3
          },{
            name:'2222',
            id:4
          },{
            name:'3333',
            id:5
          }],
					[{
            name:'类别',
            id:1
          },{
            name:'4444',
            id:6
          },{
            name:'5555',
            id:7
          },{
            name:'6666',
            id:8
          }],
					[{
            name:'排序',
            id:2
          },{
            name:'7777',
            id:9
          },{
            name:'8888',
            id:10
          }]
          
        ],
      }
    },
    computed: {},
    created() {
      // console.log(this.type)
    },
    methods: {
      _handleCurrTab(index,id) {
        this.popupShow = true
        this.active = index
        this.activeId = id
        // this._handleTab(index)
      },
      _handleClosePopup() {
        this.popupShow = false
      },
      _handleChoose(item) {
				this._handleTab(item.id)
        this.topTabList[this.active] = item
        this._handleClosePopup()
      }
    }
  }
</script>

<style scoped lang=scss>
  .topBar {
    width: 100%;
    height: 88upx;
    display: flex;
    border-bottom: 1upx solid #EFF1F0;
    background: #F6F8F7;
    position: fixed;
    left: 0;
    /*top: 88upx;*/
    /*  #ifdef  MP  */
    top: 244upx;
    /*  #endif  */
    z-index: 999;

    .tablist {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1px solid #EFF1F0;
      font-size: 32upx;

      .icon {
        width: 0;
        height: 0;
        border: 10upx solid transparent;
        border-top-color: #878C99;
        margin: 10upx 0 0 10upx;
      }

      .activeicon {
        border-top-color: transparent;
        border-bottom-color: #0AAFFF;
        margin: -10upx 0 0 10upx;
      }

    }

    .popupBox {
      position: absolute;
      left: 0;
      top: 88upx;
      width: 100%;
      height: calc(100vh - 18upx);
      background: rgba(0, 0, 0, .6);
      display: flex;
      flex-direction: column;

      .closeShow {
        width: 100%;
        height: 100%;
      }

      .center-box {
        width: 100%;
        height: 500upx;
        background: #F6F8F7;
      }

      .uni-list-item {
        line-height: 80upx;
        border-bottom: 1px #f5f5f5 solid;
        display: flex;
				background: #fff;
        .leftIcon {
          width: 80upx;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .activeIconText {
          color: #0AAFFF;
        }
      }

/*      .uni-list-item:last-child {
        border: none;
      } */
    }
  }
</style>
